<template>
	<cl-page>
		<view class="page">
			<view class="list">
				<view class="item" v-for="(item) in list" :key="item.id" style="margin-bottom: 20rpx;">
					<cl-list-item justify="start" :radius="16" >
						<cl-row type="flex" align="middle" style="padding:10rpx 0">
							<cl-avatar shape="square" :src="item.cover?item.cover:'https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/wechat_option/logo.png'"></cl-avatar>
							<div v-if="item.author"
								style="display: flex;flex-direction: column;justify-content: space-between;">
								<div>
									<cl-text :size="36" :ellipsis="16" :value="item.name"
										:margin="[0, 0, 0, 20]"></cl-text>
								</div>
								<div style="display:flex;align-items: center;margin-top:4rpx">
									<cl-text :value="item.author" :ellipsis="16"
										:margin="[0, 20, 0, 20]"></cl-text>
									<div class="tag" style="transform: scale(.75);">
										<uv-icon size="32rpx" custom-prefix="cl-iconfont" name="tiaoxingtu" color="#909399"></uv-icon>
										<cl-text :ellipsis="16" :value="item.playCount" color="#909399" :margin="[0, 6, 0, 2]"></cl-text>
									</div>
								</div>
							</div>
							<div v-else style="display: flex;align-items: center;">
								<cl-text :size="36" :ellipsis="16" :value="item.name" :margin="[0, 20, 0, 20]"></cl-text>
								<div class="tag">
									<uv-icon size="32rpx" custom-prefix="cl-iconfont" name="tiaoxingtu" color="#909399"></uv-icon>
									<cl-text :ellipsis="16" :value="item.playCount" color="#909399" :margin="[0, 6, 0, 2]"></cl-text>
								</div>

							</div>
						</cl-row>

						<template #append>
							<cl-button plain size="small" @tap="trialListening(item.id,list)">试听</cl-button>
						</template>
					</cl-list-item>
				</view>
			</view>

			<cl-empty icon="address" v-if="isEmpty(list)" />
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { onReady, onShow} from "@dcloudio/uni-app";
	import { onBeforeUnmount } from "vue";
	import { useCool, usePager } from "/@/cool";
	import { isEmpty } from "lodash-es";
	import { useUi } from "/$/cool-ui";

	import { trialListening,stopListening } from "/@/cool/utils";
	const { service, router } = useCool();
	const { list, onRefresh } = usePager<Eps.UserAddressEntity>();
	const ui = useUi();

	// 刷新
	function refresh(params ?: any, loading ?: boolean) {
		const { data, next } = onRefresh(params, { loading });
		next(service.broadcast.audio.page(data));
	}

	onShow(() => {
		if (ui.loaded) {
			refresh({}, false);
		}
	});
	onBeforeUnmount(()=>{
		// stopListening()
	})
	onReady(() => {
		refresh();
	});

	defineExpose({
		refresh,
	});
</script>

<style lang="scss" scoped>
	.page {
		padding: 24rpx;

		.tag {
			transform: scale(.9);
			padding: 6rpx 10rpx;
			font-size: 12rpx;
			background: #90939950;
			border-radius: 6rpx;
			color: #fff;
			display: inline-flex;
			align-items: center;
			line-height: 1;
		}
	}
</style>